<template>
    <el-header class="header">
        <div @click="handleCollapse" style="cursor: pointer; display: flex; align-items: center">
            <el-icon v-if="userStore.menuIsCollapse" :size="22"><Expand /></el-icon>
            <el-icon v-else :size="22"><Fold /></el-icon>
        </div>
        <div class="right">
            <el-dropdown trigger="hover">
                <div class="el-dropdown-link">
                    <template v-if="userStore.userInfo">
                        <el-avatar v-if="userStore.userInfo.avatar" :src="userStore.userInfo.avatar" :size="40" />
                        <el-avatar v-else src="/src/assets/logo.png" :size="36" />
                        <span style="margin: 0 5px">{{ userStore.userInfo.nickname || 'admin' }}</span>
                    </template>
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="goProfile">个人资料</el-dropdown-item>
                        <el-dropdown-item @click="dialogVisible = true">修改密码</el-dropdown-item>
                        <el-dropdown-item divided @click="toLogout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <el-dialog v-model="dialogVisible" width="400" title="修改密码">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="85">
                <el-form-item label="旧密码" prop="password">
                    <el-input show-password v-model="form.password" placeholder="请输入旧密码" />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input show-password v-model="form.newPassword" placeholder="请输入新密码" />
                </el-form-item>
                <el-form-item label="重复密码" prop="confirmPassword">
                    <el-input show-password v-model="form.confirmPassword" placeholder="请再次输入新密码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSubmit(formRef)">提 交</el-button>
                    <el-button type="danger" @click="dialogVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-header>
</template>

<script setup lang="ts">
    import type { FormInstance, FormRules } from 'element-plus'
    import { useUserStore } from '@/stores/user'
    import { ArrowDown } from '@element-plus/icons-vue'
    import { updatePassword } from '@/api/base'
    import { ElMessage } from 'element-plus'
    import { useRouter } from 'vue-router'
    const userStore = useUserStore()
    const router = useRouter()
    const dialogVisible = ref(false)
    const formRef = ref<FormInstance>()
    const form = ref({
        password: '',
        confirmPassword: '',
        newPassword: ''
    })

    /**
     * 验证两次输入密码是否一致
     */
    const validatePassword = (rule: any, value: any, callback: any) => {
        if (value !== form.value.newPassword) {
            callback(new Error('两次新密码输入不一致！'))
        } else {
            callback()
        }
    }
    const rules = reactive<FormRules>({
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirmPassword: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { validator: validatePassword, trigger: 'blur' }
        ],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
    })
    /**
     * 处理表单提交
     * @param formEl 表单实例
     */
    const handleSubmit = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (!valid) return
            updatePassword(form.value).then(async (res) => {
                dialogVisible.value = false
                ElMessage({
                    type: 'success',
                    message: '密码修改成功，请重新登录'
                })
                await userStore.toLogout()
                router.push({ path: '/login' })
            })
        })
    }

    /**
     * 退出登录
     */
    const toLogout = async () => {
        await userStore.toLogout()
        ElMessage.success('退出成功')
        router.push({ path: '/login' })
    }

    /**
     * 处理菜单伸缩事件
     */
    const handleCollapse = () => {
        userStore.menuIsCollapse = !userStore.menuIsCollapse
    }

    const goProfile = () => {
        router.push({ path: '/profile/index' })
    }
</script>

<style scoped lang="scss">
    .header {
        background-color: #fff;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right {
            display: flex;
            align-items: center;
            .el-dropdown-link {
                display: flex;
                align-items: center;
                outline: none;
                cursor: pointer;
            }
        }
    }
</style>
